<template>
  <div class="about">
    <h1>This is an about page</h1>
    <vuedraggable v-model="list">
      <transition-group>
        <div v-for="item in list" :key="item.id" @end="onmove">
          {{ item.name }}
        </div>
      </transition-group>
    </vuedraggable>
  </div>
</template>
<script>
import vuedraggable from "vuedraggable";
export default {
  data() {
    return {
      list: [
        { id: 1, name: "xx1" },
        { id: 2, name: "xx2" },
        { id: 3, name: "xx3" },
        { id: 4, name: "xx4" },
        { id: 5, name: "xx5" },
        { id: 6, name: "xx6" },
        { id: 7, name: "xx7" },
      ],
    };
  },
  components: {
    vuedraggable,
  },
  methods: {
    onmove() {
      console.log("移动");
    },
  },
};
</script>
